@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  ::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: hsla(220, 4%, 58%, .3);
  }
}

// 背景图
@mixin bgImg($link, $important:'') {

  @if $important=='!important' {
    background: url($link) !important;
  }

  @else {
    background: url($link);
  }

  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

@mixin radius($width, $size, $color) {
  width: $width;
  height: $width;
  line-height: $width;
  border-radius: $width;
  text-align: center;
  border-width: $size;
  border-style: solid;
  border-color: $color;
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }

  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}


// 透明度设置
@mixin op($index) {
  opacity: $index;
  filter: alpha(opacity=($index * 100));
}

// 背景图
@mixin bgImg($link, $important:'') {

  @if $important=='!important' {
    background: url($link) !important;
  }

  @else {
    background: url($link);
  }

  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

// 设置宽高
@mixin wh($wid, $hei) {
  @if $wid {
    width: $wid;
  }

  @if $hei {
    height: $hei;
  }
}

// 圆角度
@mixin radius($index) {
  -webkit-border-radius: $index;
  -moz-border-radius: $index;
  border-radius: $index;
}

// 文本样式
@mixin font($fs, $cl:'') {
  @if $fs {
    font-size: $fs;
  }

  @if $cl {
    color: $cl;
  }
}

// 输入框placeholder样式
@mixin placeholder($fs, $cl:'') {
  &::-webkit-input-placeholder {
    @include font($fs, $cl);
  }
}

// 变形
@mixin transForm($index) {
  -webkit-transform: $index;
  -moz-transform: $index;
  -ms-transform: $index;
  transform: $index;
}

// 制作小箭头
@mixin arrow($clr, $index) {
  border-right: 1px solid $clr;
  border-bottom: 1px solid $clr;
  @include transForm(rotate($index))
}

// 利用translate实现水平/垂直居中
@mixin center-translate($direction: both) {
  position: absolute;

  @if $direction==both {
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }

  @else if $direction==horizontal {
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  @else if $direction==vertical {
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}
